<!DOCTYPE html>

<html lang="en">

<head>


  <meta charset="UTF-8">


  <!-- <meta name="viewport" content="width=device-width, initial-scale=1.0"> -->


  <meta http-equiv="X-UA-Compatible" content="ie=edge">

  <title>Document</title>

</head>

<body>

  <style>
    #A {

      font-size: 50px;

      width: 400px;

      height: 400px;

      background: gray;

      /* pointer-events: none; */

    }

    #B {

      font-size: 50px;

      width: 400px;

      height: 400px;

      background: blue;

      position: absolute;

      left: 200px;

      top: 200px;


    }
  </style>
  <div>
    移动端点击穿透事件,有穿透是因为300ms延迟问题，上层元素点击 隐藏 后导致底部的被点击了， 事件顺序 touchstart--->touchend-->click事件，因为上面的隐藏了，
    解决给上层元素的touchstart事件添加默认阻止,e.preventDefault(),或者使用fastclick库,或者底部元素设置,或者设置底部的css为pointer-events: none;禁止点击
  </div>
  <div id="A">A</div>

  <div id="B">B:点我穿透A</div>

  <script>
    let A = document.getElementById('A')

    let B = document.getElementById('B')

    B.addEventListener('touchstart', function (e) {

      B.style.display = "none" // 上层元素被隐藏了才会触发穿透
      // e.preventDefault() // 通过这阻止

    })
    // B.addEventListener('touchend', function (e) {

    //   // e.preventDefault()

    // })

    A.addEventListener('click', function () {

      console.log('A:啊！我被穿透了')

    })
  </script>

</body>

</html>